<template>
    <div>
      <!---轮播样式  焦点图-->
        <mt-swipe :auto="3000" :showIndicators="true">
            <mt-swipe-item>超    市</mt-swipe-item>
            <mt-swipe-item>海 外 购</mt-swipe-item>
            <mt-swipe-item>服    饰</mt-swipe-item>
            <mt-swipe-item>生    鲜</mt-swipe-item>
            <mt-swipe-item>9.9 包邮</mt-swipe-item>
            <mt-swipe-item>领    券</mt-swipe-item>
        </mt-swipe>
        <!--列表样式-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <router-link to="/home/supermaket">
                <!--<span class="mui-icon mui-icon-home"></span>-->
                <img src="../../image/menu1.png" height="50" width="50"/>
                <div class="mui-media-body">超市</div>
                 </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#">
                <!--<span class="mui-icon mui-icon-email">-->
                <img src="../../image/menu2.png" height="50" width="50"/>
                <!--</span>-->
                <div class="mui-media-body">海外购</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#">
                <!--<span class="mui-icon mui-icon-chatbubble"></span>-->
                <img src="../../image/menu3.png" height="50" width="50"/>
                <div class="mui-media-body">服饰</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#">
                <!--<span class="mui-icon mui-icon-location"></span>-->
                <img src="../../image/menu4.png" height="50" width="50"/>
                <div class="mui-media-body">生鲜</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#">
                <!--<span class="mui-icon mui-icon-search"></span>-->
                <img src="../../image/menu5.png" height="50" width="50"/>
                <div class="mui-media-body">9.9包邮</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <a href="#">
                <!--<span class="mui-icon mui-icon-phone"></span>-->
                <img src="../../image/menu6.png" height="50" width="50"/>
                <div class="mui-media-body">领劵</div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: "home"
    }
</script>

<style scoped>
     .mint-swipe{
         height: 300px;
     }
    .mint-swipe-item:nth-child(1){
        background-color: red;
    }
     .mint-swipe-item:nth-child(2){
         background-color: blue;
     }
     .mint-swipe-item:nth-child(3){
         background-color: yellow;
     }
</style>